<template>
  <div class="bg flex flex-col items-center justify-center h-screen text-blue-400 text-base">
    <div class="flex-center text-72px mb-10 text-#059669">
      <img src="@/assets/images/logo.png" alt="logo" class="w-20 h-20 mr-4"></img>
      华声康护
    </div>
    <form class="form" autocomplete="off">
      <div class="flex-column text-#059669">
        <label>账号 </label>
      </div>
      <div class="flex items-center justify-center ">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
          <path fill="#059669"
            d="m12 23l-3-3H5q-.825 0-1.412-.587T3 18V4q0-.825.588-1.412T5 2h14q.825 0 1.413.588T21 4v14q0 .825-.587 1.413T19 20h-4zm0-11q1.45 0 2.475-1.025T15.5 8.5t-1.025-2.475T12 5T9.525 6.025T8.5 8.5t1.025 2.475T12 12m-7 6h14v-1.15q-1.35-1.325-3.137-2.087T12 14t-3.863.763T5 16.85z" />
        </svg>
        <a-input type="text" ref="inputRef" @keyup.enter.native="accountLogin" class="inputForm text-black"
          :placeholder="t('sys.login.userName')" v-model:value="formData.username" />
      </div>

      <div class="flex-column text-#059669">
        <label>密码 </label>
      </div>
      <div class=" flex items-center justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
          <path fill="#059669"
            d="M3 17h18q.425 0 .713.288T22 18t-.288.713T21 19H3q-.425 0-.712-.288T2 18t.288-.712T3 17m1-5.55l-.475.85q-.15.275-.45.35t-.575-.075t-.35-.45t.075-.575l.475-.85h-.95q-.325 0-.537-.212T1 9.95t.213-.537t.537-.213h.95l-.475-.8q-.15-.275-.075-.575t.35-.45t.575-.075t.45.35l.475.8l.475-.8q.15-.275.45-.35t.575.075t.35.45t-.075.575l-.475.8h.95q.325 0 .538.213T7 9.95t-.213.538t-.537.212H5.3l.475.85q.15.275.075.575t-.35.45t-.575.075t-.45-.35zm8 0l-.475.85q-.15.275-.45.35t-.575-.075t-.35-.45t.075-.575l.475-.85h-.95q-.325 0-.537-.212T9 9.95t.213-.537t.537-.213h.95l-.475-.8q-.15-.275-.075-.575t.35-.45t.575-.075t.45.35l.475.8l.475-.8q.15-.275.45-.35t.575.075t.35.45t-.075.575l-.475.8h.95q.325 0 .537.213T15 9.95t-.213.538t-.537.212h-.95l.475.85q.15.275.075.575t-.35.45t-.575.075t-.45-.35zm8 0l-.475.85q-.15.275-.45.35t-.575-.075t-.35-.45t.075-.575l.475-.85h-.95q-.325 0-.537-.212T17 9.95t.213-.537t.537-.213h.95l-.475-.8q-.15-.275-.075-.575t.35-.45t.575-.075t.45.35l.475.8l.475-.8q.15-.275.45-.35t.575.075t.35.45t-.075.575l-.475.8h.95q.325 0 .538.213T23 9.95t-.213.538t-.537.212h-.95l.475.85q.15.275.075.575t-.35.45t-.575.075t-.45-.35z" />
        </svg>
        <a-input type="text" id="pwd" @keyup.enter.native="accountLogin" @input="replacePwd" oncopy="return false"
          oncut="return false" class="inputForm text-black" :placeholder="t('sys.login.password')"
          v-model:value="formData.word" />
      </div>

      <div class="flex-row">
        <span class=" text-xm text-#059669">忘记密码?</span>
      </div>
      <a-button class="text-lg button-submit" :loading="loginLoading" type="primary" @click="accountLogin">
        {{ t('sys.login.loginButton') }}</a-button>

    </form>
  </div>
  <div class="fixed bottom-0 left-1/2 -translate-x-1/2 text-xs text-slate-400 whitespace-nowrap">
    <div>版权所有：@华声康护医疗（广州）有限公司</div>
  </div>
</template>

<script setup name="login-mini">
import { onMounted, reactive, ref, toRaw, nextTick } from 'vue';
import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { reactivePick, refAutoReset } from '@vueuse/core';
import { Input } from 'ant-design-vue';


const { notification, createMessage } = useMessage();

const userStore = useUserStore();

const { t } = useI18n();

//账号登录表单字段
const formData = ref({
  username: '',
  password: '',
  word: '',
  replacePwd: '',
  isShowPassword: false
})

const inputRef = refAutoReset(null);

const loginLoading = ref(false);

async function accountLogin() {

  if (!formData.value.username) {
    createMessage.warn(t('sys.login.accountPlaceholder'));
    return;
  }
  if (!formData.value.password) {
    createMessage.warn(t('sys.login.passwordPlaceholder'));
    return;
  }
  if (loginLoading.value) return

  try {
    loginLoading.value = true;

    const { userInfo } = await userStore.login(
      toRaw({
        password: formData.value.password,
        username: formData.value.username,
        mode: 'none', //不要默认的错误提示
      })
    );

    if (userInfo) {
      notification.success({
        message: t('sys.login.loginSuccessTitle'),
        description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
        duration: 3,
      });
    }
  } catch (error) {
    notification.error({
      message: t('sys.api.errorTip'),
      description: error.message || t('sys.login.networkExceptionMsg'),
      duration: 3,
    });

  } finally {
    loginLoading.value = false;
  }
}


const replacePwd = () => {
  const value = document.getElementById("pwd").value;
  const valueLength = value.length;
  const pwdLength = formData.value.password.length;

  //禁止输入中文及中文标点符号
  let pwdCn = /[\u4E00-\u9FA5]/;
  let specialChar = /[。？！，、；：“”‘’（）《》〈〉【】『』「」﹃﹄〔〕…—～﹏￥]/;

  if (pwdCn.test(value) || specialChar.test(value)) {
    formData.value.word = formData.value.replacePwd
    createMessage.warn("禁止输入中文及中文标点符号！");
    return
  }

  const vra = value.replace(new RegExp("●", "gm"), "");

  //删除字符
  if (vra != "") {
    const valArray = Array.from(value);
    //首次输入
    if (formData.value.replacePwd == "") {
      formData.value.password = value
    } else {
      let startCount = 0;
      let endCount = 0;
      let startIndex = -1;
      let endIndex = -1;
      for (let i = 0; i < valueLength; i++) {

        if (valArray[i] == "●" && startIndex == -1) {
          startCount++
        } else if (valArray[i] != "●" && startIndex == -1) {
          startIndex = i
        } else if (valArray[i] == "●" && startIndex != -1 && endIndex == -1) {
          endIndex = i
          endCount++
        } else if (valArray[i] == "●" && endIndex != -1) {
          endCount++
        }
      }

      //密码框中没有●,全部替换
      if (startCount == 0 && endCount == 0) {
        formData.value.password = value;
      } else if (startCount > 0 && endCount > 0) {
        //头及尾是●,从中间插入或替换
        formData.value.password = formData.value.password.substring(0, startCount)
          + value.substring(startCount, valueLength - endCount) + formData.value.password.substring(pwdLength - endCount)

      } else if (startCount > 0 && endCount == 0) {
        //头是●,从尾新增或替换
        formData.value.password = formData.value.password.substring(0, startCount) + value.substring(startCount)

      } else if (startCount == 0 && endCount > 0) {
        //尾是●,从头新增或替换
        formData.value.password = value.substring(0, valueLength - endCount) + formData.value.password.substring(pwdLength - endCount, pwdLength)
      }
    }
  } else {
    return
  }

  const length = formData.value.password.length;

  let rep = "";
  if (length > 0) {
    for (let i = 0; i < length; i++) {
      rep += "●"
    }
    formData.value.word = rep;
    formData.value.replacePwd = rep
  } else {
    formData.value.word = ""
    formData.value.replacePwd = ""
  }

}

onMounted(() => {
  // nextTick(() => {
  inputRef.value.focus()
  // });
});
</script>

<style>
.bg {
  background-image: linear-gradient(#dfe9f3, #fff 100%)
}

.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #ffffff;
  padding: 30px;
  width: 450px;
  border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}




.inputForm {
  border: 1.5px solid #ecedec;
  border-radius: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  margin-left: 5px;
  transition: 0.2s ease-in-out;
}




.flex-row>div>label {
  /* font-size: 14px; */
  color: black;
  font-weight: 400;
}

.span {
  /* font-size: 14px; */
  margin-left: 5px;
  /* color: #2d79f3; */
  font-weight: 500;
  cursor: pointer;
}

.button-submit {
  margin: 20px 0 10px 0;
  /* background-color: #151717; */
  border: none;
  color: white;
  /* font-size: 15px; */
  /* font-weight: 500; */
  border-radius: 10px;
  height: 50px;
  width: 100%;
  cursor: pointer;
}



.btn {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  gap: 10px;
  border: 1px solid #ededef;
  background-color: white;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
</style>